<template>
    <div class="course-week">
        <div class="week-top">
            <div class="btn_wrap">
                <el-tooltip class="item" effect="dark" content="上周" placement="top">
                    <span @click="getLastWeek"><i class="el-icon-d-arrow-left"></i>上周</span>
                </el-tooltip>
                <span @click="getCurWeek">本周</span>
                <el-tooltip class="item" effect="dark" content="下周" placement="top">
                    <span @click="getNextWeek">下周<i class="el-icon-d-arrow-right"></i></span>
                </el-tooltip>
            </div>
            <span class="todayDate"> {{ todayDate }}</span>
            <div class="chooseMonth">
                <div>
                    <span class="is_expired square"></span>
                    <span class="title">已过期</span>
                </div>
                <div>
                    <span class="in_progress square"></span>
                    <span class="title">进行中</span>
                </div>
                <div>
                    <span class="has_not_started square"></span>
                    <span class="title">未开始</span>
                </div>
            </div>
        </div>
        <div class="week_table">
            <div class="table_header">
                <div class="table_week">
                    <template v-for="(item, index) of weeks" :key="index">
                        <span class="first" v-if="index === 0" :key="index">{{ item }}<i class="el-icon-edit"></i></span>
                        <span v-else>{{ item }}</span>
                    </template>
                </div>
                <div class="table_date">
                    <template v-for="(item, index) of months" :key="index">
                        <span class="first" v-if="index === 0" :key="index">
                        </span>
                        <span v-else>
                            <span class="day_item" :class="{ 'isCurDate': item && item.isCurDate }">
                                {{ `${item && item.isCurDate ? item && item.showDate + '(今天)' || '' : item && item.showDate
                                    || ''}` }}
                            </span>
                        </span>
                    </template>
                </div>
            </div>
            <div class="timePeriodList">
                <ul class="timePeriod_row">
                    <!--循环时段，看时段有多少个-->
                    <template v-if="timePeriodList.length > 0">
                        <li class="timePeriod_col" v-for="(period, p_index) in timePeriodList" :key="`period${p_index}`">
                            <!--第一列显示时段-->
                            <div class="timePeriod"> {{ period.timePeriod }}</div>
                            <!-- 后面显示周一到周日的计划-->
                            <div class="row_day">
                                <!-- 循环显示每周的日期-->
                                <template v-for="(month, m_index) of months">
                                    <!-- v-if="month" 去除数据处理的时候移除数组第一个为empty的问题-->
                                    <div v-if="month" :key="`month${m_index}`" class="things">
                                        <!-- 循环每个时间段的计划-->
                                        <template v-for="(thing, t_index) of period.things">
                                            <!-- 根据日期和计划的日期匹配 显示 然后根据状态显示进行中 已过期 未开始-->
                                            <div v-if="thing.date === month.date" :key="`thing${t_index}`" class="thing_item"
                                                @click="handleDetail(thing)"
                                                :class="{ 'outdated': thing.status === 1, 'waiting': thing.status === 3 }">
                                                <span>时段：{{ thing.timePeriod }}</span>
                                                <span>课程：{{ thing.course }}</span>
                                                <span>值班员：{{ thing.watchman }}</span>
                                                <span>地点：{{ thing.place }}</span>
                                            </div>
                                        </template>

                                    </div>
                                </template>
                            </div>
                        </li>
                    </template>
                    <div class="noMore" v-else><span>暂无数据</span></div>
                </ul>
            </div>
        </div>
    </div>
</template>
<script>
import MyTools from './MyTools'
export default {
    name: "courseWeek",
    data() {
        return {
            weeks: [
                '时段', '周一', '周二', '周三', '周四', '周五', '周六', '周日',
            ],
            timePeriodList: [
                {
                    timePeriod: '08:00~10:00',
                    things: [
                        {
                            timePeriod: '08:00~10:00',
                            date: '2022-01-17',
                            course: '大学英语',
                            watchman: 'wqq',
                            place: 'ces',
                            status: 1,
                        },
                        {
                            date: '2022-01-18',
                            timePeriod: '08:00~10:00',
                            course: '大学英语',
                            watchman: 'wqq',
                            place: 'ces',
                            status: 2,
                        },
                        {
                            date: '2022-01-18',
                            timePeriod: '08:00~10:00',
                            course: '大学英语',
                            watchman: 'wqq',
                            place: 'ces',
                            status: 3,
                        }
                    ]
                },
                {
                    timePeriod: '10:00~12:00',
                    things: [
                        {
                            timePeriod: '10:00~12:00',
                            date: '2022-01-17',
                            course: '大学英语',
                            watchman: 'wqq',
                            place: 'ces',
                            status: 1,
                        },
                        {
                            date: '2022-01-19',
                            timePeriod: '10:00~12:00',
                            course: '大学英语',
                            watchman: 'wqq',
                            place: 'ces',
                            status: 2,
                        },
                        {
                            date: MyTools.getCurDay(),
                            timePeriod: '10:00~12:00',
                            course: '大学英语',
                            watchman: 'wqq',
                            place: 'ces',
                            status: 3,
                        }

                    ]
                },
                {
                    timePeriod: '14:00~16:00',
                    things: [
                        {
                            timePeriod: '14:00~16:00',
                            date: MyTools.getCurDay(),
                            course: '大学英语',
                            watchman: 'wqq',
                            place: 'ces',
                            status: 1,
                        },
                        {
                            date: MyTools.getCurDay(),
                            timePeriod: '14:00~16:00',
                            course: '大学英语',
                            watchman: 'wqq',
                            place: 'ces',
                            status: 2,
                        },
                        {
                            date: MyTools.getCurDay(),
                            timePeriod: '14:00~16:00',
                            course: '大学英语',
                            watchman: 'wqq',
                            place: 'ces',
                            status: 3,
                        }

                    ]
                }
            ],
            todayDate: '',
            months: [],
            curDate: "",
            nowDate: new Date(),
            showCourseDetail: false,
        }
    },
    mounted() {
        this.getCurWeek()
    },
    methods: {
        /**
         * 获取 时间
         * @param time
         */
        getWeek(time) {
            const week = time.getDay() - 1;
            time = this.addDate(time, week * -1);
            this.curDate = new Date(time);
            for (let i = 0; i < 7; i++) {
                const { year, month, day } = this.formatDate(i === 0 ? time : this.addDate(time, 1))
                this.months.push({
                    date: `${year}-${month}-${day}`,
                    showDate: `${month}-${day}`
                })
            }
            delete this.months[0];
            this.todayDate = `${this.months[1].date} ~ ${this.months[this.months.length - 1].date}`
        },
        /**
         * 处理日期
         * @param date
         * @param n
         * @returns {*}
         */
        addDate(date, n) {
            date.setDate(date.getDate() + n);
            return date;
        },
        // 日期格式处理
        formatDate(date) {
            var year = date.getFullYear();
            var months = date.getMonth() + 1;
            var month = (months < 10 ? '0' + months : months).toString();
            var day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()).toString();
            return {
                year,
                month,
                day
            }
        },
        /**
         * 上周
         */
        getLastWeek() {
            this.dealDate(this.addDate(this.curDate, -7));
        },
        /**
         * 本周
         */
        getCurWeek() {
            this.dealDate(new Date())
        },
        /**
         * 下周
         */
        getNextWeek() {
            this.dealDate(this.addDate(this.curDate, 7));
        },
        /**
         * 显示当天日期状态
         * @param date
         */
        dealDate(date) {
            this.months = ['']
            this.getWeek(date);
            const curDate = MyTools.getCurDay()
            this.months.forEach(item => {
                item.isCurDate = item.date === curDate
            })
        },
        /**
         * 点击查看详情
         * @param row
         */
        handleDetail(row) {
            console.log('row', row);
            this.showCourseDetail = true;
        }
    }
}
</script>
<style scoped lang="scss">
$borderCoder: #EAEDF2;

.course-week {
    width: 100%;
    padding: 1%;
    box-sizing: border-box;

    .week-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 40px;
        padding: 0 1%;

        .btn_wrap {
            width: 200px;
            display: flex;
            justify-content: space-around;
            color: #409EFF;

            span {
                cursor: pointer;
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: 15px;
            }

        }

        .todayDate {
            font-weight: bold;
            font-size: 16px;
        }

        .chooseMonth {
            display: flex;
            justify-content: flex-end;
            width: 18%;

            div {
                flex: 1;
                display: flex;
                padding: 0 2%;
                white-space: nowrap;
                line-height: 20px;
                box-sizing: border-box;

                .square {
                    display: flex;
                    width: 16px;
                    height: 16px;
                    border-radius: 4px;
                    box-sizing: border-box;
                }

                .title {
                    display: flex;
                    align-items: center;
                    line-height: 16px;
                    margin-left: 4px;
                    font-size: 14px;
                }

                .in_progress {
                    background: #FF6200;
                }

                .has_not_started {
                    background: #3291F8;
                }

                .is_expired {
                    background: #8E8E93;
                }
            }
        }
    }

    .week_table {
        display: flex;
        flex-direction: column;

        .table_header {
            width: 100%;
            height: 80px;
            background: #EAEDF2;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-bottom: 1px solid $borderCoder;
            box-sizing: border-box;

            .table_date,
            .table_week {
                width: 100%;
                height: 40px;
                text-align: left;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                    flex: 1;
                    color: #000;
                    height: 100%;
                    font-size: 14px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-weight: bold;

                    .day_item {
                        color: #000;
                        font-size: 14px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }

                .first {
                    cursor: pointer;

                    i {
                        margin-left: 1%;
                        font-size: 16px;
                        font-weight: bold;

                    }

                    &:hover {
                        color: #0d9bf2;
                    }

                    //border-right: 1px solid $borderCoder;
                }
            }
        }

        .timePeriodList {
            width: 100%;

            .timePeriod_row {
                width: 100%;
                min-height: 60px;

                .timePeriod_col {
                    width: 100%;
                    min-height: 60px;
                    display: flex;

                    .timePeriod {
                        width: 12.5%;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border-left: 1px solid $borderCoder;
                        border-bottom: 1px solid $borderCoder;
                        box-sizing: border-box;
                    }

                    .row_day {
                        width: 87.5%;
                        display: flex;
                        justify-content: center;

                        .things {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            border-left: 1px solid $borderCoder;
                            border-bottom: 1px solid $borderCoder;
                            box-sizing: border-box;

                            &:last-child {
                                border-right: 1px solid $borderCoder;
                            }

                            .thing_item {
                                display: flex;
                                font-size: 14px;
                                flex-direction: column;
                                justify-content: space-around;
                                color: #fff;
                                background: #FF6200;
                                min-height: 90px;
                                border-radius: 10px;
                                margin: 2% 1%;
                                padding: 1% 2%;
                                cursor: pointer;
                                box-sizing: border-box;
                            }

                            .waiting {
                                background: #409EFF;
                            }

                            .outdated {
                                color: #fff;
                                background: #9CADADB7;
                            }
                        }
                    }
                }
            }
        }
    }
}

.isCurDate {
    color: #FF2525 !important;
}

ul,
li {
    margin: 0;
    padding: 0;
}

.noMore {
    min-height: 200px;
    padding: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid rgba(156, 173, 173, 0.3);
    color: #9CADADB7;
    box-sizing: border-box;
}
</style>